<!DOCTYPE html>
<!-- saved from url=(0078)http://10.90.85.189:8020/Frame/Vue/22%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title></title>
	</head>

	<body>
		<div id="app">
			姓名:<input type="text" name="" id="" value=""> <button>点击</button> <br> <ul></ul></div>
	
	<template id="child"></template>
	<script src="./22组件实例_files/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				arr: ['野驴王', '耶律轸', '小妍妍'],
				name: "阿斯蒂芬"
			},
			components: {
				child: {
					template: "#child",
					props: ['name', 'num'],
					methods: {
						//设置删除函数
						del: function(n) {
							//触发remove事件
							this.$emit('remove', n);
						}
					}
				}
			},
			methods: {
				add: function() {
					this.arr.push(this.name);
				},
				deldata:function(n){
					this.arr.splice(n-1,1);
				}
			}
		});
	</script>

</body></html>